<!-- 自然大调的调式子选择框 -->
 <template>
   <select @change="handleChange" v-model="model">
    <option 
      v-for="(v, k) in mapping"
      :key="k"
      :value="k"
    >{{ v }}</option>
   </select>
 </template>
 
 
 <script setup lang="ts">
  interface IMapping {
    [key: string]: string;
  }
  interface IProps {
  mapping: IMapping;
  width: number;
  height: number;
  fontSize: number;
  backgroundColor?: string;
  fontColor?: string;
  padding?: number;
  }
  type TModel = string;

  import { ref } from 'vue';

  const model = defineModel<TModel>();


  const { 
  mapping, 
  width, 
  height, 
  fontSize, 
  backgroundColor = 'transparent',
  fontColor = 'black',
  padding = 10,
  } = defineProps<IProps>();


  function handleChange(e: Event) {
  const value = (e.target as HTMLSelectElement).value;
  console.log(value);
  }
 </script>

<style scoped lang="css">
  select {
    width: calc(v-bind(width) * 1px);
    height: calc(v-bind(height) * 1px);
    font-size: calc(v-bind(fontSize) * 1px);
    background-color: v-bind(backgroundColor);
    border: none;
    outline: none;
    color: v-bind(fontColor);
    padding: calc(v-bind(padding) * 1px);
  }
</style>